<template>
  <div class="app-container">
    <!-- 搜索项 -->
    <div class="search_bar">
      <el-form size="small" :inline="true" label-width="83px">
        <el-form-item label="课程名称">
          <el-input
            style="width: 180px"
            class="inputstyle"
            v-model="sea_form.courseName"
            placeholder="请输入课程名称"
            clearable
            @keyup.enter.native="getdataBysearch"
          />
        </el-form-item>
        <el-form-item label="分院名称">
          <el-select
            style="width: 180px"
            v-model="sea_form.branchId"
            placeholder="请选择"
            clearable
            class="inputstyle"
          >
            <el-option
              v-for="(item, index) in branchList"
              :key="index"
              :label="item.branchName"
              :value="item.branchId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="学科专业组">
          <el-input
            class="inputstyle"
            v-model="sea_form.disciplineGroupName"
            placeholder="请输入学科专业组"
            clearable
            @keyup.enter.native="getdataBysearch"
          />
        </el-form-item>
        <el-form-item label="主讲教师">
          <el-select
            style="width: 180px"
            class="inputstyle"
            placeholder="请选择"
            v-model="sea_form.teacherId"
            filterable
          >
            <el-option
              v-for="(item, index) in commonTeacher"
              :key="index"
              :label="item.name"
              :value="item.teacherId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="学期">
          <el-select
            style="width: 180px"
            class="inputstyle"
            placeholder="请选择学期"
            v-model="sea_form.semesterId"
            filterable
          >
            <!-- <el-option label="全部" :value="''"></el-option> -->
            <el-option
              v-for="item in schoolSemesterList"
              :key="item.semesterId"
              :label="item.semesterName"
              :value="item.semesterId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="search_btns">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="getdataBysearch"
          >搜索
          </el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetSearch"
          >重置
          </el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!--  导出按钮-->
    <div class="exportbtn">
      <el-button type="primary" size="mini" @click="exportExcel()"
      >导出Excel
      </el-button
      >
    </div>
    <!-- 问卷列表 -->
    <el-table v-loading="loading" :data="dataList">
      <el-table-column
        show-overflow-tooltip
        label="课程名称"
        align="center"
        prop="courseName"
        width="200"
        fixed
      />
      <el-table-column
        show-overflow-tooltip
        label="分院"
        align="center"
        prop="branchName"
        width="160"
        fixed
      />
      <el-table-column
        show-overflow-tooltip
        label="学科专业组"
        align="center"
        prop="disciplineGroupName"
        width="120"
        fixed
      >
        <template slot-scope="scope">
          {{ scope.row.disciplineGroupName ? scope.row.disciplineGroupName : '--' }}
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="主讲教师"
        align="center"
        prop="principalName"
        width="160"
        fixed
      />
      <el-table-column
        show-overflow-tooltip
        label="题目数"
        align="center"
        prop="topicNum"
        width="100"
      />
      <el-table-column
        show-overflow-tooltip
        label="考核数"
        align="center"
        prop="examPaperNum"
        width="100"
      />
      <el-table-column
        show-overflow-tooltip
        label="练习数"
        align="center"
        prop="practicePaperNum"
        width="100"
      />
      <el-table-column
        show-overflow-tooltip
        label="点击量"
        align="center"
        prop="clickNum"
        width="100"
      />
      <el-table-column
        show-overflow-tooltip
        label="在学人数"
        align="center"
        prop="stuStudyNum"
        width="100"
      />
      <el-table-column
        show-overflow-tooltip
        label="结课人数"
        align="center"
        prop="finishNum"
        width="100"
      />
      <el-table-column
        show-overflow-tooltip
        label="累计考核人次"
        align="center"
        prop="examNum"
        width="100"
      />
      <el-table-column
        show-overflow-tooltip
        label="生均考核次数"
        align="center"
        prop="avgExamNum"
        width="100"
      />
      <el-table-column
        show-overflow-tooltip
        label="首考通过率"
        align="center"
        prop="firstExamPassingRate"
        width="100"
      >
        <template slot-scope="scope"
        >{{ scope.row.firstExamPassingRate }}%
        </template
        >
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="重考人数"
        align="center"
        prop="applyNum"
        width="100"
      />
      <el-table-column
        show-overflow-tooltip
        label="生均重考次数"
        align="center"
        prop="avgApplyNum"
        width="100"
      />
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="sea_form.pageNum"
      :limit.sync="sea_form.pageSize"
      @pagination="getList"
    />
    <exportPancel
      ref="exportPancel"
      :pancels="pancels"
      @confirmExport="confirmexport"
    ></exportPancel>
  </div>
</template>
<script>
import { getSchoolSemesterList } from '@/api/schoolSemester/schoolSemester'

import {
  listPost_branch
} from '@/api/schoolOrganization/organization'
import { allTeacherList } from '@/api/course/course'
import exportPancel from './commponent/exportPancel'
import { courseUsageData } from '@/api/dataExport/dataexport'
import { formatDate } from '@/utils'

export default {
  components: { exportPancel },
  name: 'studyschedule',
  data() {
    return {
      pancels: [
        { label: '课程名称', value: 'courseName' },
        { label: '分院', value: 'branchName' },
        { label: '学科专业组', value: 'disciplineGroupName' },
        { label: '主讲教师', value: 'principalName' },
        { label: '题目数', value: 'topicNum' },
        { label: '考核数', value: 'examPaperNum' },
        { label: '练习数', value: 'practicePaperNum' },
        { label: '点击量', value: 'clickNum' },
        { label: '在学人数', value: 'stuStudyNum' },
        { label: '结课人数', value: 'finishNum' },
        { label: '累计考核人次', value: 'examNum' },
        { label: '生均考核次数', value: 'avgExamNum' },
        { label: '首考通过率', value: 'firstExamPassingRate' },
        { label: '重考人数', value: 'applyNum' },

        { label: '生均重考次数', value: 'avgApplyNum' }
      ],
      commonTeacher: [],
      branchList: [],
      loading: false,
      // 总条数
      total: 3,
      // 搜索条件
      sea_form: {
        pageNum: 1,
        pageSize: 50,
        branchId: '',
        courseName: '',
        teacherId: '',
        semesterId: '',
        disciplineGroupName: ''
      },
      dataList: [],
      schoolSemesterList: []
    }
  },
  async mounted() {
    await this.getSchoolSemester()
    this.getTeacher()
    this.getBranchList()
    this.getList()
  },
  methods: {
    // findNearestSemesterId(semesterArray) {
    //   const now = new Date();
    //   let matchedSemesterId = null;
    //   let nearestSemesterId = null;
    //   let minDiff = Infinity;
    //
    //   semesterArray.forEach((semester) => {
    //     const beginTime = new Date(semester.beginTime);
    //     const endTime = new Date(semester.endTime);
    //
    //     // 判断当前时间是否在区间内
    //     if (now >= beginTime && now < endTime) {
    //       matchedSemesterId = semester.semesterId; // 找到匹配的学期ID
    //       return; // 直接跳出循环
    //     }
    //
    //     // 如果不在区间内，计算与当前时间的差值，寻找最近的一个开始时间
    //     const diff = Math.abs(now - beginTime);
    //     if (diff < minDiff) {
    //       minDiff = diff;
    //       nearestSemesterId = semester.semesterId;
    //     }
    //   });
    //
    //   // 如果找到了匹配的学期，优先返回匹配的学期ID
    //   return matchedSemesterId || nearestSemesterId || " ";
    // },
    async getSchoolSemester() {
      let res = await getSchoolSemesterList()
      const { code, rows } = res
      if (code == 200) {
        this.schoolSemesterList = rows
      }
      this.sea_form.semesterId = this.$store.getters.schoolInfo.semesterId
    },
    // 搜索
    getdataBysearch() {
      this.sea_form.pageNum = 1
      // 发送获取信息请求
      this.getList()
    },
    // 重置
    resetSearch() {
      this.sea_form = {
        pageNum: 1,
        pagrSize: 10,
        branchId: '',
        courseName: '',
        teacherId: '',
        semesterId: this.$store.getters.schoolInfo.semesterId,
        disciplineGroupName: ''
      }
      this.getdataBysearch()
    },
    // 获取问卷数据
    async getList() {
      this.loading = true
      let res = await courseUsageData(this.sea_form)
      this.loading = false
      const { code, rows, total } = res
      if (code == 200) {
        this.total = total
        this.dataList = rows
      }
      console.log(this.dataList, 'skdkdsssssssssskdd')
      // 发送获取数据请求
    },
    // 获取分院
    getBranchList() {
      listPost_branch({
        pageNum: 1,
        pageSize: 9999,
        schoolId: this.$store.getters.schoolId
      }).then((res) => {
        if (res.code == 200) {
          console.log(res.rows, 'skdkdkdd')
          this.branchList = res.rows
        }
      })
    },
    /* 获取主讲教师 */
    async getTeacher() {
      let res = await allTeacherList({
        schoolId: this.$store.getters.schoolId,
        pageNum: 1,
        pageSize: 9999
      })
      console.log(res.rows, 'ssssssss')
      this.commonTeacher = res.rows
    },
    exportExcel() {
      this.$refs.exportPancel.show()
    },
    // 导出
    async confirmexport(str) {
      let obj = this.sea_form
      obj.params = str
      this.download(
        `/school/system/exportData/courseUsageDataExport`,
        obj,
        `课程使用数据表_${formatDate(new Date())}.xlsx`
      )
    }
  }
}
</script>
<style scoped lang="scss">
.search_bar {
  padding: 20px 20px 0 20px;
  background-color: #fafafa;

  .search_btns {
    float: right;
  }
}

.exportbtn {
  display: flex;
  justify-content: flex-end;

  margin: 10px 0;
}

.inputstyle {
  width: 240px !important;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  -webkit-appearance: none;
  background-color: #fff;
  /* 滚动条背景颜色 */
  height: 8px;
  /* 滚动条高度 */
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #bfbfbf;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #fff;
}
</style>
